
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { MessageSquare, Heart, Clock, HelpCircle, GraduationCap } from "lucide-react";

export const TeacherStudentZone = () => {
  return (
    <div className="space-y-6">
      {/* Zone Header */}
      <Card className="bg-gradient-to-r from-green-50 to-blue-50 border-green-200">
        <CardContent className="p-6">
          <div className="flex items-center gap-3 mb-3">
            <GraduationCap className="w-6 h-6 text-green-600" />
            <h2 className="text-2xl font-bold text-gray-900">Student–Teacher Interaction Zone</h2>
          </div>
          <p className="text-gray-700">Get help from teachers, participate in Q&A sessions, and access office hours.</p>
        </CardContent>
      </Card>

      <Card className="bg-white dark:bg-gray-800 shadow-sm border">
        <CardHeader>
          <div className="flex justify-between items-center">
            <CardTitle className="text-lg font-semibold">Teacher Posts & Student Q&A</CardTitle>
            <Button size="sm">
              <HelpCircle className="w-4 h-4 mr-2" />
              Ask Question
            </Button>
          </div>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Teacher Post */}
          <div className="border border-green-200 bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-2">
              <GraduationCap className="w-4 h-4 text-green-600" />
              <Badge className="bg-green-600 text-white text-xs">Teacher Post</Badge>
            </div>
            <div className="flex space-x-4">
              <Avatar>
                <AvatarImage src="https://api.dicebear.com/7.x/pixel-art/svg?seed=teacher1" />
                <AvatarFallback>DR</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <div className="flex items-center space-x-2 mb-1">
                  <span className="font-medium text-gray-900 dark:text-gray-100">Dr. Rachel Smith</span>
                  <Badge className="bg-blue-600 text-white text-xs">Mathematics Teacher</Badge>
                  <span className="text-gray-500 dark:text-gray-400">· 2 hours ago</span>
                </div>
                <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
                  Office Hours: Algebra II Help Session
                </h3>
                <p className="text-gray-700 dark:text-gray-300 mb-3">
                  Having trouble with quadratic equations? Join me tomorrow from 3-4 PM for a focused help session. Bring your questions and we'll work through problems together. Room 204 or virtual link in comments.
                </p>
                <div className="flex flex-wrap gap-2 mb-3">
                  <Badge variant="secondary" className="text-xs">Office Hours</Badge>
                  <Badge variant="secondary" className="text-xs">Algebra II</Badge>
                  <Badge variant="secondary" className="text-xs">Help Session</Badge>
                </div>
                <div className="flex items-center gap-2 mb-2">
                  <Clock className="w-4 h-4 text-gray-500" />
                  <span className="text-sm text-blue-600 hover:underline cursor-pointer">Tomorrow 3:00-4:00 PM</span>
                </div>
                <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                  <button className="hover:text-blue-600 flex items-center">
                    <MessageSquare className="w-4 h-4 mr-1" />
                    <span>8 Comments</span>
                  </button>
                  <button className="hover:text-green-600 flex items-center">
                    <Heart className="w-4 h-4 mr-1" />
                    <span>23 Likes</span>
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* Student Question */}
          <div className="flex space-x-4">
            <Avatar>
              <AvatarImage src="https://api.dicebear.com/7.x/pixel-art/svg?seed=student4" />
              <AvatarFallback>TK</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <div className="flex items-center space-x-2 mb-1">
                <span className="font-medium text-gray-900 dark:text-gray-100">Taylor Kim</span>
                <Badge variant="outline" className="text-xs">Grade 11</Badge>
                <span className="text-gray-500 dark:text-gray-400">· 4 hours ago</span>
              </div>
              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
                Question: How to approach essay structure in English Lit?
              </h3>
              <p className="text-gray-700 dark:text-gray-300 mb-3">
                I'm struggling with organizing my thoughts for literary analysis essays. Any teachers have tips on creating strong thesis statements and supporting arguments? My essays feel scattered.
              </p>
              <div className="flex flex-wrap gap-2 mb-3">
                <Badge variant="secondary" className="text-xs">English Literature</Badge>
                <Badge variant="secondary" className="text-xs">Essay Writing</Badge>
                <Badge variant="secondary" className="text-xs">Help Needed</Badge>
              </div>
              <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                <button className="hover:text-blue-600 flex items-center">
                  <MessageSquare className="w-4 h-4 mr-1" />
                  <span>15 Comments</span>
                </button>
                <button className="hover:text-green-600 flex items-center">
                  <Heart className="w-4 h-4 mr-1" />
                  <span>12 Likes</span>
                </button>
              </div>
            </div>
          </div>

          {/* Teacher Answer */}
          <div className="ml-12 border-l-2 border-green-200 pl-4">
            <div className="flex space-x-3">
              <Avatar className="w-8 h-8">
                <AvatarImage src="https://api.dicebear.com/7.x/pixel-art/svg?seed=teacher2" />
                <AvatarFallback>MJ</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <div className="flex items-center space-x-2 mb-1">
                  <span className="font-medium text-gray-900 dark:text-gray-100">Ms. Johnson</span>
                  <Badge className="bg-purple-600 text-white text-xs">English Teacher</Badge>
                  <span className="text-gray-500 dark:text-gray-400">· 2 hours ago</span>
                </div>
                <p className="text-gray-700 dark:text-gray-300 text-sm">
                  Great question, Taylor! Try the "claim-evidence-commentary" structure for each paragraph. Start with a clear thesis, then each body paragraph should make one specific claim about the text, provide textual evidence, and explain how that evidence supports your thesis. I'll post a detailed guide tomorrow!
                </p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};
